<template>
    <div class="homeRouter-container">
        <swiper :lunBoList="lunBoList"></swiper>
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="item in jiuGeList"
                    :key="item.id">
                    <router-link :to="{path:'/home/newList',query:{id:item.id}}">
                        <img :src="item.icon" alt="">
                        <div class="mui-media-body">{{item.name}}</div>
                    </router-link>
                </li>
            </ul>
            <div class='index-enter'>
                <router-link class="enter-item" to="/home/photoList">
                    <img src="http://hbimg.b0.upaiyun.com/0bcb215334160beb72eefa26d6b7af1e1471e03b55b5-j5YW5q_fw658" alt="">
                </router-link>
                <router-link class="enter-item" to='/home/shopping'>
                    <img src="http://bpic.588ku.com/element_origin_min_pic/16/09/04/1357cbaeea044a5.jpg" alt="">
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import swiper from '../subComponents/swiper.vue';

    export default {
        data() {
            return {
                lunBoList: [],
                jiuGeList: []
            }
        },
        created() {
            this.getLunBo();
            this.getJiuGe();
        },
        methods: {
            getLunBo() {
                this.$http.get('slides').then(result => {
                    if (result.status === 200) {
                        this.lunBoList = result.body;
                    } else {
                        Toast('网络较差，请稍候再试')
                    }
                })
            },
            getJiuGe() {
                this.$http.get('categories').then(result => {
                    if (result.status === 200) {
                        this.jiuGeList = result.body;
                    } else {
                        Toast('网络较差，请稍候再试')
                    }
                })
            },
        },
        components:{
            swiper
        }

    }
</script>

<style lang="less" scoped>
    .homeRouter-container {
        .mui-content {
            display: flex;
            flex-direction: column;
            ul {
                background-color: #fff;
                li {
                    width: 33.333%;
                    margin: 0;
                    padding: 0;
                    border: 0;
                    img {
                        width: 40px;
                        height: 40px;
                    }
                }
            }
        }
        .index-enter {
            display: flex;
            padding: 10px 20px;
            background-color: #fff;
            /*margin-bottom: 50px;*/
            .enter-item {
                display: flex;
                justify-content: center;
                width: 50%;
                height: 70px;
                img {
                    width: 150px;
                    height: 120px;
                    -webkit-background-size: cover;
                    background-size: cover;
                }
            }
            .enter-item+.enter-item {
                margin-left: 10px;
            }

        }

        .mui-content > .mui-table-view:first-child {
            margin-top: 0;
        }

        .mui-grid-view.mui-grid-9 .mui-table-view-cell {
            padding: 5px 0px;
        }
    }

</style>